<script lang="ts" setup>
	import { reactive, ref, getCurrentInstance,watch } from 'vue'
	import { onLoad, onShow,onUnload } from '@dcloudio/uni-app';
	import { userStore } from '@/pinia';
		import * as im from '@/common/im.js';
	
	import {useRouter} from 'uni-mini-router'
	const router = useRouter()
	const { proxy } = getCurrentInstance()
	const userStoreInfo = userStore();
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg')
	const popShow = ref(false)
	const timeShow = ref(false)
	const btnPick = ref(true)
	const showCalendar = ref(false)
	const time = ref()
	const jobList = ref([])
	let info = ref({})
	let timePeriodIdList = []
	let payConfirmShow = ref(false)
	let employinfo = reactive({
		data:{},
	})
	const data = reactive({
		"type": 'day',
		"time": null,
		"price": '0.00',
		hourTimePeriodIdList:[],
		hourPopupShow:false,
		tabsList:[],
		workDate:"",
		timeList:[],
		customStyle:{
			background:'#CB645E',
			color:'#fff'
		},
		disableDay:[]
	})
	
	let orderId= ref('')
	
	let timeId = ref()
	watch(payConfirmShow, (newVal, oldVal) => {
		if (!newVal && oldVal) {
			clearInterval(timeId.value)
		} 
	})
	
	const getDays = ()=>{
		//获取当前时间的年月日
		const today = new Date();
		const dateArray = [];
		const dayOfWeekArray = [];
		const yearMonthDayArray = [];

		for (let i = 0; i < 7; i++) {
			const d = new Date(today);
			d.setDate(today.getDate() + i);

			dateArray.push(d.getDate());

			const dayOfWeekStr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][d.getDay()];
			dayOfWeekArray.push(dayOfWeekStr);
			
			let month = (d.getMonth() + 1)>9?d.getMonth() + 1:'0'+ (d.getMonth()+1)
			let day = d.getDate()>9?d.getDate():'0'+d.getDate()
			const yearMonthDayStr = `${d.getFullYear()}-${month}-${day}`;
			yearMonthDayArray.push(yearMonthDayStr);
		}
		data.tabsList = [];

		for (let i = 0; i < dateArray.length; i++) {
			data.tabsList.push({
				data: dateArray[i],
				numa: dayOfWeekArray[i],
				time: yearMonthDayArray[i]
			})
		}
		data.workDate = data.tabsList[0].time
		
	}

	proxy.$req('GET', proxy.$api.getJobList, {
		pageNo: 1,
		pageSize: 10
	}).then((res) => {
		if (res.code === 200) {
			let list = []
			res.result.records.forEach(e => {
				list[e.id] = e.name
			})
			jobList.value = list
		}
	})
	const changeBtn = (e) => {
		btnPick.value = !btnPick.value
		if (e) {
			data.type = 'hour'
		} else {
			data.type = 'day'
		}
		data.time = null
		time.value = null
	}

	const confirm = (e) => {
	
		if(e.range.data.length==0){
			uni.$u.toast('请选择')
			return
		}
		let timeArr = []
		if(data.disableDay.length>0){
			e.range.data.forEach(el=>{
				let idx = data.disableDay.findIndex(item=>item == el)
				if(idx==-1){
					timeArr.push(el)
				}
			})
		}else{
			timeArr = e.range.data
		}
	
		data.time = timeArr
		time.value = timeArr[0] + '~'+timeArr[timeArr.length - 1]
		console.log(data.time)
		getShortWorkerSalary()
	};
	const payinfo = ref({})
	//确认雇佣
	const subData = () => {
		if(!employinfo.data.username){
			uni.$u.toast('请点击添加')
			return
		}
		let isNotEmpty = false
		console.log(data.type,data.time,data.price!='0.00')
		if(data.type && data.time!=null &&data.time!=''  && data.price!='0.00'){
			isNotEmpty = true
		}
		// const isNotEmpty = Object.values(data).every(value => value && value !== '0.00');
		console.log(isNotEmpty);

		if (isNotEmpty) {
			const par = {
				address: employinfo.data.address || '',
				areaId: info.value.areaId || '',
				cityId: info.value.cityId || '',
				employMemberid: userStoreInfo.userInfo.id,
				employmentType: data.type == 'day' ? 0 : 1,
				memberId: info.value.memberId,
				num: data.time.length,
				provinceId: info.value.provinceId || '',
				salary: data.price,
				shortWorkerId: info.value.id,
				endDate: data.type == 'day' ? data.time[data.time.length - 1]:data.workDate,
				startDate: data.type == 'day'?data.time[0]:data.workDate,
				timePeriodId: [],
				username: employinfo.data.username,
				userphone:  employinfo.data.phone,
			}
			
			if (par.employmentType == 0) {
				timePeriodIdList.forEach(e => {
					if (e.startTime === par.startDate && e.endTime === par.endDate) {
						par.timePeriodId = [e.id]
					}
				})
			}else{
				par.timePeriodId = data.hourTimePeriodIdList
			}
			proxy.$req('POST', proxy.$api.employShortWorker, par).then((res) => {
				if (res.code === 200) {
					payinfo.value = res.result
					popShow.value = false
					payConfirmShow.value = true
					//唤出确认支付按钮	
				} else {
					uni.$u.toast(res.message)
				}
			})
		}
	}
	//确认支付
	const paymoney = () => {
		proxy.$req('POST', proxy.$api.shortWorkerPay, payinfo.value).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				payinfo.value = {}
				// let url = JSON.parse(res.result.result).resp_data.counter_url
				let url = JSON.parse(res.result.counter_url)
				// #ifdef APP-PLUS
				plus.runtime.openURL(url)
				console.log('app');
				// #endif
				// #ifdef H5
				window.open(url)
				console.log('h5');
				// #endif
				//支付成功或者失败的回调缺少
				timeId.value = setInterval(() => {
				isPaySuccess(timeId.value)
				}, 2000)
			}
		})
	}
	const isPaySuccess = (val) => {
		proxy.$req('POST', proxy.$api.meiyeShortWordersOrderCommonQueryById, {
			id:payinfo.value.orderId
		}).then((res) => {
			if (res.code != 200 || res.result == null) {
				console.log("出错了")
				uni.$u.toast(res.message)
				return
			}
			if(res.result.payStatus==1){
				router.push({
					name: 'payStatus',
					params: {
						status: '支付成功',
						backNum: 3
					}
				})
			}
			// let a = JSON.parse(JSON.stringify(res)).result
			// let data = JSON.parse(a).resp_data
			// if (data.order_status == 0) {
			// 	uni.$u.toast('待支付')
			// } else if (data.order_status == 1) {
			// 	uni.$u.toast('支付中')
			// } else if (data.order_status == 2) {
			// 	uni.$u.toast('支付成功')
			// 	router.push({
			// 		name: 'payStatus',
			// 		params: {
			// 			status: '支付成功',
			// 			backNum: 3
			// 		}
			// 	})
			// 	// setTimeout(() => {
			// 	// 	uni.navigateBack({
			// 	// 		delta: 2
			// 	// 	});
			// 	// },1000)
			// } else if (data.order_status == 3) {
			// 	uni.$u.toast('支付失败')
			// } else if (data.order_status == 4) {
			// 	uni.$u.toast('订单已过期')
			// } else if (data.order_status == 5) {
			// 	uni.$u.toast('订单已取消')
			// } else if (data.order_status == 6) {
			// 	uni.$u.toast('部分退款或者全部退款')
			// }
		})
	}
	//短时工详细信息
	const getInfo = (id) => {
		proxy.$req('GET', proxy.$api.getShortInfo, {
			shortWorkId: id,
		}).then((res) => {
			if (res.code === 200) {
				let value = res.result
				value.industryCertificate = res.result.industryCertificate?res.result.industryCertificate.split(','):[]
				info.value = value
				
				getShortWorkUserUnavailableTimeFun()
				getAllWorkDateWithShortWorkId()
			
			}
		})
		proxy.$req('GET', proxy.$api.shortWorkPeriod, {
			pageNo: 1,
			pageSize: 10
		}).then((res) => {
			if (res.code === 200) {
				timePeriodIdList = res.result.records
			}
		})
	}
	
	const getShortWorkUserUnavailableTimeFun = () => {
		proxy.$req('GET', proxy.$api.getShortWorkUserUnavailableTime, {
			shortWorkId: info.value.id,
			workDate:data.workDate
		}).then((res) => {
			if (res.code === 200) {
				data.timeList = res.result.splice(1,res.result.length-1)
			
			}
		})
	}
	
	onLoad((option) => {
		
		getInfo(option.id)
		getDays()
		// data.workDate = obj.time
		
	})
	

	const parse = (str) => {
		if(str!='' && str != null){
			return str.split(',')
		}else{
			return [];
		}
		
	}
	
	let calendar = ref('calendar')
	const open = ()=> {
		if(data.type == 'day'){
			calendar.value.open();
		}else{
			data.hourPopupShow = true
		}
		
	}
	const closePopup = ()=>{
		console.log('closePopup')
		data.hourPopupShow = false
	}
	const openPopup = ()=>{
		console.log('openPopup')
	}
	const tabClick = (obj)=>{
		data.workDate = obj.time
		
		getShortWorkUserUnavailableTimeFun()
	}
	const checkedHour = (obj)=>{
		if(obj.work){
			uni.showToast({
				title: '此时间段已有工作',
				icon: 'none'
			})
			return
		}
		data.hourTimePeriodIdList = [obj.periodId]
		time.value = obj.startTime+'-'+obj.endTime
	}
	const submitTime = ()=>{
		if(time.value){
			let timeArr = time.value.split('-')
			data.time = [timeArr[0],timeArr[1]]
			data.hourPopupShow = false
			getShortWorkerSalary()
		}
		
	}
	const getTimeClass = (item)=>{
		// (item.startTime+'-'+item.endTime) == time?'activedTime'
		if(!item.work &&  (item.startTime+'-'+item.endTime) == time.value){
			return 'activedTime'
		}else if(item.work){
			return 'forbidden'
		}
	}
	
	const getShortWorkerSalary = ()=>{
		let params = {
			employmentType: data.type == 'day' ? 0 : 1,
			endDate: data.type == 'day' ? data.time[data.time.length - 1]:data.workDate,
			startDate: data.type == 'day'?data.time[0]:data.workDate,
			dailyFee:data.type == 'day' ?info.value.dailyFee:0,
			hourFee:data.type == 'day'?0:info.value.hourFee,
			timePeriodId:[]
		}
		if (params.employmentType == 0) {
			timePeriodIdList.forEach(e => {
				if (e.startTime === params.startDate && e.endTime === params.endDate) {
					params.timePeriodId = [e.id]
				}
			})
		}else{
			params.timePeriodId = data.hourTimePeriodIdList
		}
		proxy.$req('POST', proxy.$api.shortWorkerSalary, params).then((res) => {
			if (res.code === 200) {
				console.log(res)
				data.price = res.result
			
			}
		})
	}
	
	const getAllWorkDateWithShortWorkId = async()=>{
		await proxy.$req('get', proxy.$api.getAllWorkDateWithShortWorkId,{shortWorkId:info.value.id,}).then((res) => {
			
			if (res.code == 200) {
				data.disableDay = res.result
				console.log(data.disableDay,'data.disableDay')
			}
			showCalendar.value = true
		})
	}
	
	
	// 取消支付--删除订单
	const payConfirmCloseFun = ()=>{
		proxy.$req('post', proxy.$api.employerNoPay,payinfo.value).then((res) => {
			payConfirmShow.value = false
		})
	}
	

	const toAddress = ()=>{
		//注册全局事件，添加完后刷新列表
		uni.$on('updataAddress', (data) => {
			console.log(data,'updataAddressupdataAddress')
			employinfo.data = data
			uni.$off('updataAddress')
		})
		router.push({
			name: 'addMineAddress',
			params: {
				pageUrl:'employWorkerDetails'
				
			}
		})
	}
	onUnload(() => {
		uni.$off('updataAddress')
	})
	const clickImg = (item,arr)=>{
		uni.previewImage({
			urls: arr, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: item, // 当前显示图片的http链接，默认是第一个
			success: function(res) {},
			fail: function(res) {},
			complete: function(res) {},
		})
	}
	
	const likeShortWorkerBtn = ()=>{
		proxy.$req('get', proxy.$api.likeShortWorker,{shortWorkerId:info.value.id}).then((res) => {
			console.log(res,'res')
			if (res.code == 200) {
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
				getInfo(info.value.id)
			}
		})
	}
	const toIm = () => {
		
		const userStoreInfo = userStore();
		const userId = userStoreInfo.userInfo.id;
			
		if(userId == info.value.memberId){
			alert("不能和自己聊天");
			return ;
		}
		//联系客服
		// console.log('state.detailsData', state.detailsData);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'shotwork',
			toUserId: info.value.memberId,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
		
		
		
	}
	
</script>

<template>
	<u-navbar class="navbar" bgColor="rgb(255, 255, 255)" border="true" :placeholder="true" title="" :autoBack="true">
		<template #center>
			<view style="font-weight: 400; font-size: 36rpx;">短时工详情</view>
		</template>
	</u-navbar>
	<view class="main">
		<view class="card">
			<view class="info">
				<u-avatar :src="info.headImage" size=50 style="margin-right: 20rpx;"></u-avatar>
				<view>
					<view class="name">
						{{info.username||''}}
					</view>
					<view class="subTag">
						<text>{{info.sex===0?'男':info.sex===1?'女':'未知'}}</text>
						<u-line direction="col" length="32rpx" margin="2rpx 15rpx" color="#898989"></u-line>
						<text>{{info.workeAge||''}}年</text>
						<u-line direction="col" length="32rpx" margin="2rpx 15rpx" color="#898989"></u-line>
						<text>{{jobList[info.jobId||'']}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				收费标准
			</view>
			<view class="subPrice">
				<text>{{info.hourFee||''}}元/小时</text>
				<text>{{info.dailyFee||''}}元/天</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				精通
			</view>
			<view class="subPrice">
				<text>{{info.proficiency||''}}</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				服务星级
			</view>
			<view class="subPrice">
				<text>{{info.serviceStarRating}}星</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				有无传染病
			</view>
			<view class="subPrice">
				<text>{{info.isIllness===0?'无':info.isIllness===1?'有':'未知'}}</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				现住地址
			</view>
			<view class="subPrice">
				<text>{{info.address||''}}</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				籍贯
			</view>
			<view class="subPrice">
				<text>{{info.nativePlace||''}}</text>
			</view>
		</view>

		<view class="subCard">
			<view class="title">
				行业证书
			</view>
			<view class="subPrice">
				<u-image class="imageItem" :show-loading="false" v-for="(item,index) in info.industryCertificate" :key="index"
					:src="item" width="80px" height="80px" @click="clickImg(item,info.industryCertificate)"></u-image>
			</view>
		</view>
	</view>
	<view class="tabBar">
		<view class="icon">
			<u-icon name="thumb-up" size=30  color="#CB645E" v-if="info.isLike"></u-icon>
			<u-icon name="thumb-up" size=30 @click="likeShortWorkerBtn" v-else></u-icon>
			
			<u-icon name="chat-fill" size=30  @click="toIm" ></u-icon>
		</view>
		<view class="subBtn" @click="popShow = true">
			雇佣
		</view>
	</view>
	<view class="clear"></view>

	<u-popup :show="popShow" @close="popShow = false" round=10 class="popupBox">
		<view class="subCard" @click="toAddress">
			<view class="subTitle subTitle1">
				<text>{{employinfo.data.username||'请点击添加'}}&nbsp;{{employinfo.data.phone||''}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="subAddress">
				<text>{{employinfo.data.address||''}}</text>
			</view>
		</view>
		<view class="popCard">
			<view class="subTitle">
				雇佣类型
			</view>
			<view class="subAddress">
				<view :class="!btnPick?'btn':'subBtn'" @click="changeBtn(0)">
					按日
				</view>
				<view :class="btnPick?'btn':'subBtn'" @click="changeBtn(1)">
					按小时
				</view>
			</view>
		</view>
		<view class="popCard">
			<view class="subTitle">
				雇佣时间
			</view>
			<view class="subAddress" @click="open">
				{{time?time:'选择雇佣时间'}}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="popCard">
			<view class="subTitle">
				薪资
			</view>
			<view class="subAddress">
				<view style="width: 200rpx; display: flex; align-items: center;">
					<span style="font-size: 34rpx; color: black;">￥</span>
					<u-input v-model="data.price" disabled border="none" type="digit"></u-input>
				</view>
			</view>
		</view>
		<view class="popCard">
			<view class="subBtn" @click="subData">
				立即雇佣
			</view>
		</view>
	</u-popup>
	<uni-calendar
		v-if="showCalendar"
		class="calendarBox"
		ref="calendar"
		:insert="false"
		:lunar="true" 
		:range="true"
		:disableDay="data.disableDay"
		@confirm="confirm"
		
	 />
	 
	<u-popup :show="data.hourPopupShow" @close="closePopup" @open="openPopup" round=10 class="hourPopupBox" zIndex="20000" closeable>
		<view class="popupMain">
			<view class="header">
				<text>选择时间</text>
			</view>
			<view class="tabsListBox">
				<u-tabs :list="data.tabsList" @click="tabClick" keyName="time"></u-tabs>
			</view>
			<view class="timeBox">
				<!-- :class="(item.startTime+'-'+item.endTime) == time?'activedTime':''" -->
				<view class="timeBox-item" v-for="item in data.timeList" :class="getTimeClass(item)" :key="item.periodId" @click="checkedHour(item)">
					{{item.startTime}}-{{item.endTime}}
				</view>
			</view>
			<view class="btn" @click="submitTime">
				<u-button shape="circle" :customStyle="data.customStyle">确认</u-button>
			</view>
		</view>
	</u-popup>
	
	<u-popup :show="payConfirmShow" :closeable="true" @close="payConfirmCloseFun" round="12">
		<view class="popClass">
			<view class="title r-flex-between-center">
				<text> </text>
				<text>确认付款</text>
				<!-- <u-icon name="close" style="opacity: 0;"></u-icon> -->
				<text></text>
			</view>
			<view class="money r-flex-center-end intFont">
				<text style="font-size: 48rpx;font-weight: bold;line-height: 1.5;">￥</text>
				<text>{{ data.price.toFixed(2) }}</text>
			</view>
			<view class="msgBox r-flex-between-center" style="margin-top: 48rpx;">
				<text>订单编号</text>
				<text>{{payinfo.orderNo}}</text>
			</view>
			<view class="msgBox r-flex-between-center">
				<text>付款方式</text>
				<text>拉卡拉支付</text>
			</view>
			<view class="nowPay" @click="paymoney">
				立即付款
			</view>
		</view>
	</u-popup>
	
	<!-- <up-calendar showMark="false" color="rgb(51,51,51)"
	:show="timeShow" mode="range" @confirm="confirm" @close="timeShow=false"></up-calendar> -->
</template>
<style>
	.calendarBox .uni-calendar__mask,.calendarBox .uni-calendar--fixed{
		z-index:200000 !important;
	}
	.calendarBox .uni-calendar-item--disable{
		background-color: rgba(249, 249, 249, 0.3);
		color: #c0c0c0;
	}
</style>
<style lang="scss" scoped>
	:deep(.calendarBox .uni-calendar__mask) {
		z-index:200000 !important;
	}
	:deep(.calendarBox .uni-calendar--fixed){
		z-index:200000 !important;
	}
	:deep(.calendarBox .uni-calendar-item--disable){
		background-color: rgba(249, 249, 249, 0.3);
		color: #c0c0c0;
	}
	
	.popClass {
		height: 718rpx;
	
		.title {
			margin: 32rpx 0;
			padding: 0 32rpx;
			font-size: 36rpx;
			font-weight: 500;
		}
	
		.money {
			font-size: 88rpx;
			font-weight: bold;
			color: #000000;
		}
	
	
		.msgBox {
			padding: 26rpx 48rpx;
	
			text:nth-child(1) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.45);
			}
	
			text:nth-child(2) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	
		.nowPay {
			margin: 0 auto;
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #CB645E;
			border-radius: 16rpx;
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			margin-top: 136rpx;
		}
	}
	
	.popupMain{
		height:1000rpx;
		display:flex;
		flex-direction: column;
		.header{
			height:100rpx;
			flex-shrink: 1;
			line-height:100rpx;
			text-align: center;
		}
		.tabsListBox{
			height:88rpx;
			flex-shrink: 1;
		}
		.timeBox{
			overflow-y: auto;
			display:flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding:20rpx 24rpx;
			height:680rpx;
			box-sizing: border-box;
			.timeBox-item{
				width:32%;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				background:#f7f7f7;
		
				margin-bottom:10rpx;
				font-size: 24rpx;
				border-radius: 10rpx;	
				box-sizing: border-box;
				
			}
			.activedTime{
				border:2rpx solid red;
				
			}
			.forbidden{
				color:#ccc;
			}
		}
		.btn{
			height:40rpx;
			padding:0 24rpx;
			
		}
	}
	.card {
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgb(232, 232, 232);

		.info {
			display: flex;
			align-items: flex-start;

			.name {
				font-size: 36rpx;
				font-weight: 900;
				color: rgb(106, 106, 106);
			}

			.subTag {
				display: flex;
				font-size: 24rpx;
				margin: 24rpx 0;
			}
		}
	}

	.subCard {
		padding: 30rpx 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		border-bottom: 1px solid rgb(232, 232, 232);

		.title {
			font-size: 34rpx;
			font-weight: 900;
			padding: 10rpx 0 20rpx;
		}

		.subPrice {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: rgb(182, 182, 182);
			font-size: 26rpx;
			.imageItem{
				margin-right:20rpx;
				margin-bottom:20rpx;
			}
		}
		
		.subTitle1{
			display:flex;
			width:100%;
			justify-content: space-between;
		}
		.subTitle {
			font-size: 30rpx;
			padding: 10rpx 0 20rpx;
		}

		.subAddress {
			font-size: 28rpx;
			color: rgb(132, 132, 132);
			font-size: 26rpx;
		}
	}

	.popCard {
		padding: 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: nowrap;
		border-bottom: 1px solid rgb(232, 232, 232);

		.subBtn {
			background-color: #CB645E;
			color: #fff;
			font-size: 28rpx;
			width: 600rpx;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			border-radius: 48rpx;
			margin: 50rpx auto 0;
		}

		.subTitle {
			font-weight: 900;
		}

		.subAddress {
			display: flex;
			color: rgb(132, 132, 132);
			font-size: 26rpx;

			.btn {
				margin: 0 10rpx;
				width: 160rpx;
				height: 65rpx;
				background-color: rgb(217, 217, 217);
				color: #000;
				text-align: center;
				line-height: 65rpx;
				border-radius: 10rpx;
			}

			.subBtn {
				margin: 0 10rpx;
				width: 160rpx;
				height: 65rpx;
				background-color: #CB645E;
				color: #fff;
				text-align: center;
				line-height: 65rpx;
				border-radius: 10rpx;
			}
		}
	}

	.clear {
		width: 100%;
		height: 180rpx;
	}

	.tabBar {
		background-color: #fff;
		width: 100%;
		height: 180rpx;
		position: fixed;
		bottom: 0;
		border-top: 1px solid rgb(232, 232, 232);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 50rpx;

		.icon {
			display: flex;
			width: 200rpx;
			justify-content: space-between;
		}

		.subBtn {
			background-color: #CB645E;
			color: #fff;
			font-size: 28rpx;
			width: 400rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 12rpx;
		}
	}
</style>